<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公式设计器 - 可视化拖拽设计</title>
    <link rel="stylesheet" href="css/edit.css">
</head>
<body>
    <div class="designer-container">
        <!-- 左侧参数定义面板 -->
        <div class="node-panel">
            <div class="panel-header">
                <div class="panel-title">📋 参数定义</div>
                <div class="panel-subtitle">先定义参数，再设计公式</div>
            </div>
            
            <!-- 参数定义区域 -->
            <div style="padding: 8px 12px; border-bottom: 1px solid #e8e8e8;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
                    <span style="font-weight: 600; font-size: 12px;">🔢 输入参数</span>
                    <button class="toolbar-btn" onclick="addParameter()" style="padding: 2px 6px; font-size: 11px;">+ 添加</button>
                </div>
                <div id="parameterDefinitions">
                    <!-- 参数列表将在这里动态生成 -->
                </div>
            </div>
            
            <div class="node-categories">
                <!-- 数学运算节点 -->
                <div class="node-category">
                    <div class="category-title">🧮 数学运算</div>
                    <div class="node-item" draggable="true" data-node-type="math" data-node-subtype="add">
                        <div class="node-icon">➕</div>
                        <div class="node-info">
                            <div class="node-name">加法</div>
                            <div class="node-desc">a + b</div>
                        </div>
                    </div>
                    <div class="node-item" draggable="true" data-node-type="math" data-node-subtype="subtract">
                        <div class="node-icon">➖</div>
                        <div class="node-info">
                            <div class="node-name">减法</div>
                            <div class="node-desc">a - b</div>
                        </div>
                    </div>
                    <div class="node-item" draggable="true" data-node-type="math" data-node-subtype="multiply">
                        <div class="node-icon">✖️</div>
                        <div class="node-info">
                            <div class="node-name">乘法</div>
                            <div class="node-desc">a * b</div>
                        </div>
                    </div>
                    <div class="node-item" draggable="true" data-node-type="math" data-node-subtype="divide">
                        <div class="node-icon">➗</div>
                        <div class="node-info">
                            <div class="node-name">除法</div>
                            <div class="node-desc">a / b</div>
                        </div>
                    </div>
                    <div class="node-item" draggable="true" data-node-type="math" data-node-subtype="power">
                        <div class="node-icon">🔺</div>
                        <div class="node-info">
                            <div class="node-name">幂运算</div>
                            <div class="node-desc">a ^ b</div>
                        </div>
                    </div>
                </div>

                <!-- 函数节点 -->
                <div class="node-category">
                    <div class="category-title">🔧 内置函数</div>
                    <div class="node-item" draggable="true" data-node-type="function" data-node-subtype="max">
                        <div class="node-icon">🔝</div>
                        <div class="node-info">
                            <div class="node-name">最大值</div>
                            <div class="node-desc">max(a, b, ...)</div>
                        </div>
                    </div>
                    <div class="node-item" draggable="true" data-node-type="function" data-node-subtype="min">
                        <div class="node-icon">🔻</div>
                        <div class="node-info">
                            <div class="node-name">最小值</div>
                            <div class="node-desc">min(a, b, ...)</div>
                        </div>
                    </div>
                    <div class="node-item" draggable="true" data-node-type="function" data-node-subtype="sqrt">
                        <div class="node-icon">√</div>
                        <div class="node-info">
                            <div class="node-name">平方根</div>
                            <div class="node-desc">sqrt(x)</div>
                        </div>
                    </div>
                    <div class="node-item" draggable="true" data-node-type="function" data-node-subtype="abs">
                        <div class="node-icon">📏</div>
                        <div class="node-info">
                            <div class="node-name">绝对值</div>
                            <div class="node-desc">abs(x)</div>
                        </div>
                    </div>
                    <div class="node-item" draggable="true" data-node-type="function" data-node-subtype="round">
                        <div class="node-icon">🔄</div>
                        <div class="node-info">
                            <div class="node-name">四舍五入</div>
                            <div class="node-desc">round(x)</div>
                        </div>
                    </div>
                    <div class="node-item" draggable="true" data-node-type="function" data-node-subtype="ceil">
                        <div class="node-icon">⬆️</div>
                        <div class="node-info">
                            <div class="node-name">向上取整</div>
                            <div class="node-desc">ceil(x)</div>
                        </div>
                    </div>
                    <div class="node-item" draggable="true" data-node-type="function" data-node-subtype="floor">
                        <div class="node-icon">⬇️</div>
                        <div class="node-info">
                            <div class="node-name">向下取整</div>
                            <div class="node-desc">floor(x)</div>
                        </div>
                    </div>
                </div>

                <!-- 常量节点 -->
                <div class="node-category">
                    <div class="category-title">🔢 常量值</div>
                    <div class="node-item" draggable="true" data-node-type="constant" data-node-subtype="number">
                        <div class="node-icon">💯</div>
                        <div class="node-info">
                            <div class="node-name">数字</div>
                            <div class="node-desc">固定数值</div>
                        </div>
                    </div>
                    <div class="node-item" draggable="true" data-node-type="constant" data-node-subtype="string">
                        <div class="node-icon">📝</div>
                        <div class="node-info">
                            <div class="node-name">字符</div>
                            <div class="node-desc">固定文本</div>
                        </div>
                    </div>
                    <div class="node-item" draggable="true" data-node-type="constant" data-node-subtype="boolean">
                        <div class="node-icon">✓✗</div>
                        <div class="node-info">
                            <div class="node-name">布尔</div>
                            <div class="node-desc">true / false</div>
                        </div>
                    </div>
                </div>

                <!-- 条件判断节点 -->
                <div class="node-category">
                    <div class="category-title">🔀 条件判断</div>
                    <div class="node-item" draggable="true" data-node-type="condition" data-node-subtype="controller">
                        <div class="node-icon">🎛️</div>
                        <div class="node-info">
                            <div class="node-name">条件控制器</div>
                            <div class="node-desc">自动包含if-elsif-else分支</div>
                        </div>
                    </div>
                    <div class="node-item" draggable="true" data-node-type="condition" data-node-subtype="simple">
                        <div class="node-icon">❓</div>
                        <div class="node-info">
                            <div class="node-name">三目运算</div>
                            <div class="node-desc">condition ? true : false</div>
                        </div>
                    </div>
                    <div class="node-item" draggable="true" data-node-type="condition" data-node-subtype="gt">
                        <div class="node-icon">▶️</div>
                        <div class="node-info">
                            <div class="node-name">大于</div>
                            <div class="node-desc">a > b</div>
                        </div>
                    </div>
                    <div class="node-item" draggable="true" data-node-type="condition" data-node-subtype="lt">
                        <div class="node-icon">◀️</div>
                        <div class="node-info">
                            <div class="node-name">小于</div>
                            <div class="node-desc">a < b</div>
                        </div>
                    </div>
                    <div class="node-item" draggable="true" data-node-type="condition" data-node-subtype="gte">
                        <div class="node-icon">⏩</div>
                        <div class="node-info">
                            <div class="node-name">大于等于</div>
                            <div class="node-desc">a >= b</div>
                        </div>
                    </div>
                    <div class="node-item" draggable="true" data-node-type="condition" data-node-subtype="lte">
                        <div class="node-icon">⏪</div>
                        <div class="node-info">
                            <div class="node-name">小于等于</div>
                            <div class="node-desc">a <= b</div>
                        </div>
                    </div>
                    <div class="node-item" draggable="true" data-node-type="condition" data-node-subtype="eq">
                        <div class="node-icon">🟰</div>
                        <div class="node-info">
                            <div class="node-name">等于</div>
                            <div class="node-desc">a == b</div>
                        </div>
                    </div>
                    <div class="node-item" draggable="true" data-node-type="condition" data-node-subtype="neq">
                        <div class="node-icon">≠</div>
                        <div class="node-info">
                            <div class="node-name">不等于</div>
                            <div class="node-desc">a != b</div>
                        </div>
                    </div>
                    <div class="node-item" draggable="true" data-node-type="condition" data-node-subtype="and">
                        <div class="node-icon">∧</div>
                        <div class="node-info">
                            <div class="node-name">逻辑与</div>
                            <div class="node-desc">a && b</div>
                        </div>
                    </div>
                    <div class="node-item" draggable="true" data-node-type="condition" data-node-subtype="or">
                        <div class="node-icon">∨</div>
                        <div class="node-info">
                            <div class="node-name">逻辑或</div>
                            <div class="node-desc">a || b</div>
                        </div>
                    </div>
                    <div class="node-item" draggable="true" data-node-type="condition" data-node-subtype="not">
                        <div class="node-icon">¬</div>
                        <div class="node-info">
                            <div class="node-name">逻辑非</div>
                            <div class="node-desc">!a</div>
                        </div>
                    </div>
                </div>

                <!-- 输出节点 -->
                <div class="node-category">
                    <div class="category-title">📤 输出结果</div>
                    <div class="node-item" draggable="true" data-node-type="output" data-node-subtype="result">
                        <div class="node-icon">🎯</div>
                        <div class="node-info">
                            <div class="node-name">输出结果</div>
                            <div class="node-desc">最终计算结果</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中间画布区域 -->
        <div class="canvas-area">
            <div class="canvas-toolbar">
                <button class="toolbar-btn" onclick="window.open('index.html', '_blank')">🏠 返回首页</button>
                <button class="toolbar-btn" onclick="clearCanvas()">🗑️ 清空</button>
                <button class="toolbar-btn" onclick="autoLayout()">📐 自动布局</button>
                <button class="toolbar-btn" onclick="zoomOut()" title="缩小 (Ctrl/Cmd + -)">🔍➖ 缩小</button>
                <button class="toolbar-btn" onclick="resetZoom()" title="重置缩放 (Ctrl/Cmd + 0)&#10;也可按住Ctrl滚动鼠标滚轮">🔍 <span id="zoomLevel">100%</span></button>
                <button class="toolbar-btn" onclick="zoomIn()" title="放大 (Ctrl/Cmd + +)">🔍➕ 放大</button>
                <div style="flex: 1;"></div>
                <button class="toolbar-btn primary" onclick="generateExpression()">🔧 生成表达式</button>
                <button class="toolbar-btn primary" onclick="testFormula()">▶️ 测试运行</button>
                <button class="toolbar-btn" onclick="saveFormula()">💾 保存公式</button>
            </div>
            
            <div class="canvas-container">
                <div class="canvas" id="canvas">
                    <div class="drop-hint" id="dropHint">
                        <div class="drop-hint-icon">🎨</div>
                        <div>从左侧拖拽节点到这里开始设计公式</div>
                        <div style="font-size: 12px; margin-top: 8px; color: #bbb;">
                            支持拖拽、连线、配置参数等操作<br>
                            💡 点击连接线上的 × 按钮可以删除连接
                        </div>
                    </div>
                </div>
                <!-- SVG 移到canvas外部，覆盖整个container -->
                <svg id="connectionSvg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; overflow: visible;">
                </svg>
            </div>

            <!-- 预览面板 -->
            <div class="preview-panel">
                <div class="preview-title">📋 公式与结果</div>
                <div class="preview-content" id="formulaPreview">
                    <p style="color: #999; text-align: center;">请先在画布上设计公式，然后点击"生成表达式"按钮...</p>
                </div>
            </div>
        </div>

        <!-- 右侧属性面板 -->
        <div class="property-panel">
            <!-- 公式信息区域 -->
            <div class="panel-header">
                <div style="display: flex; align-items: center; justify-content: space-between;">
                    <div>
                        <div class="panel-title">📝 公式信息</div>
                        <div class="panel-subtitle">设置公式基本信息</div>
                    </div>
                </div>
            </div>
            
            <div style="padding: 16px; border-bottom: 1px solid #e8e8e8;">
                <div class="form-group">
                    <label class="form-label">公式名称</label>
                    <input type="text" id="formulaNameInput" class="form-input" placeholder="请输入公式名称" onchange="updateFormulaInfo()">
                </div>
                
                <div class="form-group">
                    <label class="form-label">公式描述</label>
                    <textarea id="formulaDescInput" class="form-textarea" placeholder="请输入公式描述（可选）" onchange="updateFormulaInfo()"></textarea>
                </div>
            </div>

            <div class="panel-header">
                <div style="display: flex; align-items: center; justify-content: space-between;">
                    <div>
                        <div class="panel-title">⚙️ 属性配置</div>
                        <div class="panel-subtitle">配置选中节点的属性</div>
                    </div>
                </div>
            </div>
                
            <div class="property-content" id="propertyContent">
                <div style="text-align: center; padding: 40px 20px; color: #999;">
                    <div style="font-size: 36px; margin-bottom: 16px;">🎛️</div>
                    <div>请选择一个节点进行配置</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 端口提示框 -->
    <div id="portTooltip" class="port-tooltip"></div>

    <!-- 参数编辑抽屉 -->
    <div id="paramDrawer" class="param-drawer">
        <div class="param-drawer-overlay" onclick="closeParamDrawer()"></div>
        <div class="param-drawer-content">
            <div class="param-drawer-header">
                <div class="param-drawer-title">
                    <span id="paramDrawerIcon">📝</span>
                    <span id="paramDrawerTitle">编辑参数</span>
                </div>
                <button class="param-drawer-close" onclick="closeParamDrawer()">×</button>
            </div>
            <div class="param-drawer-body" id="paramDrawerBody">
                <!-- 参数编辑表单将在这里动态生成 -->
            </div>
            <div class="param-drawer-footer">
                <button class="param-drawer-btn param-drawer-btn-cancel" onclick="closeParamDrawer()">取消</button>
                <button class="param-drawer-btn param-drawer-btn-save" onclick="saveParamFromDrawer()">保存</button>
                <button class="param-drawer-btn param-drawer-btn-delete" onclick="deleteParamFromDrawer()" id="paramDrawerDeleteBtn" style="display: none;">删除参数</button>
            </div>
        </div>
    </div>

    <script src="js/edit.js"></script>
</body>
</html>
